<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>面板示例</title>
	<link rel="stylesheet" type="text/css" href="../../dist/css/hisui.lite.css">
	<script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
	<script src="../jquery-tag-demo.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../dist/js/jquery.hisui.js"></script>
	<link rel="stylesheet" type="text/css" href="../demo.css">
</head>

<body>
	<h2>面板</h2>
	<h3>说明:</h3>
	<span>面板是其他组件或元素的容器</span>
	<h3>一、面板</h3>
	<div>
		<div class="use-prettyprint">
			<div class="hisui-panel" title="病人信息" style="width:400px;padding:20px;" 
			data-options="closable:false,collapsible:true,minimizable:false,maximizable:true">
				面板
			</div>
		</div>
	</div>
	<h3>二、多面板布局</h3>
	<div>
		<div class="use-prettyprint">
			<div style="padding: 10px;">
				<div>
					<div class="hisui-panel" title="病人信息" style="height:200px;padding:20px;" 
					data-options="closable:false,collapsible:true,minimizable:false,maximizable:false">
						面板
					</div>
				</div>
				<div style="margin: 10px 0;">
					<div class="hisui-panel" title="诊断列表" style="height:200px;padding:20px;" 
					data-options="closable:false,collapsible:true,minimizable:false,maximizable:false">
						医嘱列表信息
					</div>
				</div>
				<div>
					<div class="hisui-panel" title="医嘱列表" style="height:200px;padding:20px;" 
					data-options="closable:false,collapsible:true,minimizable:false,maximizable:false">
						医嘱列表信息
					</div>
				</div>
			</div>
			
		</div>
	</div>
	<table class="table">
		<tr class="protitle">
			<th>属性</th>
			<th>说明</th>
			<th>默认值</th>
			<th></th>
		</tr>
		<tr>
			<td>bodyCls</td>
			<td>面板内容样式类</td>
			<td>null</td>
			<td>可选值：<code>'panel-body-gray'</code></td>
		</tr>
		<tr>
			<td>headerCls</td>
			<td>面板头样式类</td>
			<td>null</td>
			<td>可选值<code>'showicon'</code>,因极简版默认不显示图标,可用showicon用于强制显示图标</td>
		</tr>
	</table>
	<prettyprint/>
</body>
</html>